<template>
  <div class="app-container">
    <h1>基础信息</h1>

    <el-form
      :model="form"
      :rules="rules"
      :visible.sync="open"
      ref="form"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item label="供应商名称" prop="supplierName">
        <el-select
          v-model="form.supplierName"
          filterable
          allow-create
          default-first-option
          placeholder="供应商名称"
        >
          <el-option
            v-for="item in xialakuang"
            :key="item.value"
            :label="item.supplierName"
            :value="item.supplierName"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="收料主题" prop="supplierTheme">
        <el-input v-model="form.supplierTheme" placeholder="请输入主题" />
      </el-form-item>

      <el-form-item label="收料单号" prop="receiptMaterialNo">
        <el-input
          v-model="form.receiptMaterialNo"
          placeholder="请输入收料单号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="运输单位" prop="transportUnit">
        <el-input
          v-model="form.transportUnit"
          placeholder="请输入运输单位"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="运输(元)" prop="freight">
        <el-input
          v-model="form.freight"
          placeholder="请输入价格"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <br />

      <el-form-item label="收料人" prop="materialPerson">
        <el-input
          v-model="form.materialPerson"
          placeholder="请输入收料人员"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="收料时间">
        <el-date-picker
          v-model="form.daterangeMaterialTime"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
    </el-form>
    <h1>物料明细</h1>
    <el-row>
      <el-button type="primary" @click="tianjia">添加</el-button>
      <el-button type="primary">批量删除</el-button>
      <!-- <el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button> -->

      <el-dialog title="添加物料" :visible.sync="dialogTableVisible">
        <el-form>
          <el-table
            border
            ref="multipleTable"
            :data="listNum"
            style="width: 100%"
             @selection-change="SelectionChange"
          >
            <el-table-column type="selection" width="55" align="center" />

            <el-table-column label="序号" prop="id" width="120" />

            <el-table-column
              prop="materialType"
              label="物料类别"
              show-overflow-tooltip
            >
            </el-table-column>

            <el-table-column
              prop="materialName"
              label="物料名称"
              show-overflow-tooltip
            >
            </el-table-column>

            <el-table-column
              prop="specifications"
              label="规格"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="unit"
              label="单位"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="count"
              label="数量"
              show-overflow-tooltip
            >
        <template slot-scope="scope">
          <el-input v-model="scope.row.count"></el-input>
        </template>
            </el-table-column>
          </el-table>



          <!-- <el-table ref="multipleTable" tooltip-effect="dark" style="width: 100%">
                    
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column label="序号" prop="id" width="120">
          </el-table-column>
          <el-table-column label="物料类别" width="120">



          </el-table-column>
          <el-table-column prop="materialName" label="物料名称" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="specifications" label="规格" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="unit" label="单位" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="count" label="数量" show-overflow-tooltip>
            <el-input-number v-model="nums" controls-position="right" :min="1" :max="10"></el-input-number>
          </el-table-column>
        </el-table> -->




        <div style="margin-top: 20px; text-align: center">
              <el-form-item>
                <el-button @click="dialogTableVisible = false">取消</el-button>
                <el-button type="primary" @click="insert">保存</el-button>
              </el-form-item>
            </div>
        </el-form>
        
      </el-dialog>
    </el-row>
    <!-- 下面表格 -->
    <div class="tables" style="margin-top: 20px">
      <el-form>
        <el-table :data='lit1' ref="multipleTable" tooltip-effect="dark" style="width: 100%">
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column label="序号" prop="id" width="120">
          </el-table-column>
          <el-table-column prop="materialType" label="物料类别" width="120">
          </el-table-column>
          <el-table-column
            prop="warehouseName"
            label="仓库名称"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="specifications"
            label="规格"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column prop="unit" label="单位" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="count" label="收料数量" show-overflow-tooltip>
            
          </el-table-column>

          <el-table-column prop="handle" label="操作" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="del"
                v-hasPermi="['system:info:remove']"
                >删除&emsp;|</el-button
              >
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleUpdate(scope.row)"
                v-hasPermi="['system:info:edit']"
                >&emsp;分配详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="quxiao">取 消</el-button>
        <el-button type="primary" @click="queding">确 定</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {
  listInfo,
  getInfo,
  delInfo,
  addInfo,
  updateInfo,
  supplierDropDown,
  materialDrop,
  wonfirmWarehousing,
} from "@/api/material/MaterialInfo";

export default {
  name: "Info",
  data() {
    return {
      al:'',
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      value: "",
      valLength:[],
      xiaoshi: true,
      dialogTableVisible: false,
      dialogFormVisible: false,
      nums: 1,
      jinyong: false,
      listNum:[],
      lit1:[],
      wuxia: [],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 收料单信息表格数据
      infoList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      xialakuang: [],
      // 项目编号时间范围
      daterangeMaterialTime: [],
      // 供应商下拉框
      xialakuang: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        createBy: null,
        receiptMaterialNo: null,
        categoryName: null,
        supplierTheme: null,
        supplierName: null,
        materialType: null,
        warehouseName: null,
        warehouseArea: null,
        materialPerson: null,
        materialTime: null,
        projectNo: null,
        categoryNo: null,
        specifications: null,
        unit: null,
        materialName: null,
        count: null,
      },
      arr:[],
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        supplierTheme: [
          { required: true, message: "收料主题不能为空", trigger: "change" },
        ],
      },
    };
  },
  created() {
    // materialDrop(this.queryParams).then(ok => {
    //   for (let i = 0; i < ok.rows.length; i++) {
    //     this.wuxia = ok.rows[i].categoryNo;
    //     this.wuxia = ok.rows
    //   }
    // })
    supplierDropDown(this.form).then((res) => {
      for (let i = 0; i < res.rows.length; i++) {
        this.xialakuang = res.rows[i].supplierName;
        this.xialakuang = res.rows;
      }
    });

    // this.reset()
  },
  methods: {
    // 弹框复选框添加
    SelectionChange(val){
      console.log(val)
      this.arr = val
      this.valLength = val.length;
      this.arrayVal = []
    },



    // 物料明细的弹窗取消
    quxiao() {
      this.$router.go(-1);
    },
    // 物料明细下的添加按钮
    tianjia() {
      this.dialogTableVisible = true;
      listInfo(this.queryParams).then(res=>{
        this.listNum = []
        for (let i = 0; i < res.rows.length; i++) {
          // let item = res.rows[i];
// console.log(res.rows[i].materialInfoList) 
          let item = res.rows[i].materialInfoList
          console.log(item)
          for(let j = 0;j<item.length;j++){
          this.listNum.push(item[j]);
          }
        }
        
      })
      materialDrop(this.queryParams).then((ok) => {
        for (let i = 0; i < ok.rows.length; i++) {
          this.wuxia = ok.rows[i].categoryNo;
          this.wuxia = ok.rows;
        }
      });
    },
    // 物料明细的弹窗
    tanqu() {
      this.dialogTableVisible = false;

      // this.$router.go(-1)
    },
    baoCunAdd() {
      this.dialogTableVisible = false;
    },
    // 收料数量
    handleChange(value) {
      console.log(value);
    },
    // 新增弹框保存按钮
    insert(){
      this.lit1  = this.arr

this.dialogTableVisible = false;
    },
    del(){
      this.lit1=null,
      this.$modal.msgSuccess("删除成功");
    },
    queding() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            console.log(123);
          } else {
            addInfo(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;

              this.$router.go(-1);
              this.getList();
            });
          }
        }
      });
    },
    // selects() {
    // },
    // superTheme() {
    //   console.log(111111)
    // },
    // /** 查询收料单信息列表 */
    // getList() {
    //   this.loading = true;
    //   this.queryParams.params = {};
    //   if (null != this.daterangeMaterialTime && '' != this.daterangeMaterialTime) {
    //     this.queryParams.params["beginMaterialTime"] = this.daterangeMaterialTime[0];
    //     this.queryParams.params["endMaterialTime"] = this.daterangeMaterialTime[1];
    //   }
    //   listInfo(this.queryParams).then(response => {
    //     this.infoList = response.rows;
    //     this.total = response.total;
    //     this.loading = false;
    //   });
  },
  // 取消按钮
  // cancel() {
  //   this.open = false;
  //   this.reset();
  // },
  // 表单重置
  reset() {
    this.form = {
      id: null,
      receiptMaterialNo: null,
      supplierTheme: null,
      supplierName: null,
      categoryName: null,
      materialType: null,
      summary: null,
      warehouseName: null,
      warehouseArea: null,
      materialPerson: null,
      materialTime: null,
      supplierNo: null,
      transportUnit: null,
      carNumber: null,
      freight: null,
      categoryNo: null,
      createTime: null,
      createBy: null,
      comment: null,
      projectNo: null,
      specifications: null,
      unit: null,
      materialName: null,
      count: null,
    };
    this.resetForm("form");
  },
  /** 搜索按钮操作 */
  // handleQuery() {
  //   this.queryParams.pageNum = 1;
  //   this.getList();
  // },
  /** 重置按钮操作 */
  // resetQuery() {
  //   this.daterangeMaterialTime = [];
  //   this.resetForm("queryForm");
  //   this.handleQuery();
  // },
  // 多选框选中数据
  // handleSelectionChange(selection) {
  //   this.ids = selection.map(item => item.id)
  //   this.single = selection.length !== 1
  //   this.multiple = !selection.length
  // },
  /** 新增按钮操作 */
  // handleAdd() {
  //   this.reset();
  //   this.open = true;
  //   this.title = "添加收料单信息";
  //   this.$router.push("/MaterialInfo/MaterialInfoAdd")
  // },
  /** 修改按钮操作 */
  // handleUpdate(row) {
  //   this.reset();
  //   const id = row.id || this.ids
  //   getInfo(id).then(response => {
  //     this.form = response.data;
  //     this.open = true;
  //     this.title = "修改收料单信息";
  //   });
  // },
  /** 提交按钮 */
  // submitForm() {
  //   this.$refs["form"].validate(valid => {
  //     if (valid) {
  //       if (this.form.id != null) {
  //         updateInfo(this.form).then(response => {
  //           this.$modal.msgSuccess("修改成功");
  //           this.open = false;
  //           this.getList();
  //         });
  //       } else {
  //         addInfo(this.form).then(response => {
  //           this.$modal.msgSuccess("新增成功");
  //           this.open = false;
  //           this.getList();
  //         });
  //       }
  //     }
  //   });
  // },
  // 查看
  // lookOver() {
  //   console.log(22222)
  // },
  /**确认入库*/
  // storage(row) {
  //   wonfirmWarehousing(row.id).then(res=>{
  //     if(res.code = 500){
  //       this.jinyong = true;

  //     }else{
  //       this.$message({
  //           type: 'info',
  //           message: `入库成功`
  //         });
  //     }
  //   })
  //   // countersign(this.)
  // },
  /** 删除按钮操作 */
  handleDelete(row) {
    const ids = row.id || this.ids;
    this.$modal
      .confirm('是否确认删除收料单信息编号为"' + ids + '"的数据项？')
      .then(function () {
        return delInfo(ids);
      })
      .then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      })
      .catch(() => {});
  },

  /** 导出按钮操作 */
  //   handleExport() {
  //     this.download('system/info/export', {
  //       ...this.queryParams
  //     }, `info_${new Date().getTime()}.xlsx`)
  //   }
  // }
};
</script>


<style lang="scss" scoped>
h1 {
  width: 141px;
  height: 55px;
  line-height: 55px;
  text-align: center;
  border-bottom: 1px solid red;
  margin-left: 5px;
}

.outers .headers {
  width: 100%;
  height: 50px;

  border-bottom: 1px solid gainsboro;

  h1 {
    margin-left: 50px;
    padding-top: 10px;
  }
}

.outer {
  margin-top: 17px;
  margin-left: 50px;
}

.bottom {
  margin-left: 30px;
  margin-top: 90px;

  el-button {
    width: 40px;
    height: 30px;
    background: blue;
  }

  .adds {
    display: flex;
  }

  .tables {
    margin-top: 10px;
    margin-right: 10px;
  }
}

.el-select .el-input {
  width: 130px;
}

.input-with-select .el-input-group__prepend {
  background-color: #fff;
}

.dialog-footer {
  text-align: center;
  margin-top: 15px;
}
</style>


































<!-- <template>
<div>
  <h1>基础信息</h1>
  
</div>
</template>
<script>
export default{

}
</script>
<style scoped>
    h1{
      width: 141px;
      height: 55px;
      line-height: 55px;
      text-align: center;
      border-bottom: 1px solid red;
      margin-left: 5px;
    }
</style> -->